<template>
  <div>
      <el-upload
        class="upload-demo"
        action=""
        :http-request="fnUploadRequest"
        :show-file-list="true"
        :limit="maxLimit"
        :file-list="fileListNew"
        :on-exceed="beyondFile"
        :before-upload="beforeUpload"
        :on-success="handleSuccess"
        :on-remove="handleRemove">
        <el-button size="small" type="primary">点击上传</el-button>
        <div class="el-upload__tip" slot="tip"></div>
      </el-upload>
  </div>
</template>

<script>
import oss from '@/utils/oss'

export default {
  name: 'UploadOssAll',
  props: {
    fileList:{
      type: Array,
      default: []
    },
    maxLimit:{
      type: Number,
      default: 50
    },
    tip:{
      type: String,
      default: ''
    },
  },
  data() {
    return {
      formData: {
      	dir_type: "",//上传路径
        file_name: "",//上传文件名(固定)
        allow_type: "",//允许上传的文件后缀（多个逗号隔开）
        file_size: "",//允许上传文件大小
      },
      fileList: [], //已上传文件列表
      maxLimit: 50,//最大允许上传个数
      tip: '',//提示文字
      showUrl: '',//显示文件url
      formUrl: '', //form文件url
      fileListNew: [],
    }
  },
  watch: {
      fileList: "urlHandle"
  },
  methods: {
    //文件url处理
    urlHandle(newVal, oldVal) {
      this.fileListNew = [];
      if (this.fileList.length > 0) {
        this.fileList.forEach((item) => {
          this.fileListNew.push({ name: item, url: item });
        });
      }
    },
    /**
     * @description [fnUploadRequest 覆盖默认的上传行为，实现自定义上传]
     * @param    {object}   option [上传选项]
     * @return   {null}   [没有返回]
     */
    async fnUploadRequest(option) {
      oss.ossUploadFile(option)
    },
    // 添加多个文件事件
    beyondFile(files, fileList) {
      // todo
    },
    //上传文件之前的钩子
    beforeUpload(file) {
      //判断上传类型?

      //判断文件大小
      /*const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;*/
    },
    // 上传成功后
    handleSuccess(response, file, fileList) {
      let that = this;
      let imgArr = [];
      fileList.forEach(item => {
        if(item.response){
          if (item.response.res.statusCode == 200) {
            imgArr.push(item.response.name);
          }else{
            that.$message('上传失败！');
            return false;
          }
        }else{
          let str = '/' + item.url.split('/').slice(3).join('/');
          imgArr.push(str);
        }
      });
      that.formUrl = imgArr.join(',');
      //返回数据
      that.$emit('uploadCallBack', {fileName: that.formUrl});
    },
    // 删除
    handleRemove(file,fileList) {
      let imgArr = [];
      fileList.forEach(item => {
        if (item.response) {
        	if (item.response.res.statusCode == 200) {
        		imgArr.push(item.response.name);
        	}
        }else{
        	let str = '/' + item.url.split('/').slice(3).join('/');
        	imgArr.push(str);
        }
      });
      this.formUrl = imgArr.join(',');
      //返回数据
      this.$emit('uploadCallBack', {fileName: this.formUrl});
    }
  }
}
</script>

<style type="text/css">


</style>
